<UserControl x:Class="WozLib.UI.Controls.FontSizeSelector"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Name="_FontSizeSelector"
    >
  <UserControl.Resources>
    <!-- Converter to bind togglebutton state to element visiblity -->
    <BooleanToVisibilityConverter x:Key="B2VC" />

    <ControlTemplate x:Key="RectRadio">
      <Grid Margin="5,5,5,5">
        <Rectangle Fill="#19000000" RadiusX="5" RadiusY="5"/>
        <Rectangle x:Name="SelectedRectangle" Stroke="Blue" StrokeThickness="1.0" RadiusX="5" RadiusY="5"
                   Visibility="{TemplateBinding Property=RadioButton.IsChecked, Converter={StaticResource B2VC}}">
          <Rectangle.Fill>
            <SolidColorBrush>
              <SolidColorBrush.Color>
                <Color ScR="0.85" ScG="0.85" ScB="1.0" ScA="1.0"/>
              </SolidColorBrush.Color>
            </SolidColorBrush>
          </Rectangle.Fill>
        </Rectangle>
        <Rectangle x:Name="MouseOverRectangle" Stroke="Blue" StrokeThickness="1.0" Opacity="0.0" RadiusX="5" RadiusY="5">
          <Rectangle.Fill>
            <SolidColorBrush>
              <SolidColorBrush.Color>
                <Color ScR="0.50" ScG="0.70" ScB="1.0" ScA="1.0"/>
              </SolidColorBrush.Color>
            </SolidColorBrush>
          </Rectangle.Fill>
        </Rectangle>
        <ContentPresenter Content="{TemplateBinding Property=ContentControl.Content}" Margin="3"/>
      </Grid>
      <ControlTemplate.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation 
                  Storyboard.TargetName="MouseOverRectangle"
                  Storyboard.TargetProperty="Opacity"
                  To="1" Duration="0:0:0.1"/>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
          <EventTrigger.Actions>
            <BeginStoryboard>
              <Storyboard>
                <DoubleAnimation 
                  Storyboard.TargetName="MouseOverRectangle"
                  Storyboard.TargetProperty="Opacity"
                  AccelerationRatio="0.2"
                  DecelerationRatio="0.4"
                  To="0" Duration="0:0:0.3"/>
              </Storyboard>
            </BeginStoryboard>
          </EventTrigger.Actions>
        </EventTrigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </UserControl.Resources>


  <Expander>
    <Expander.Header>
      <StackPanel Orientation="Horizontal">
        <StackPanel.LayoutTransform>
          <ScaleTransform ScaleX="0.75" ScaleY="0.75"/>
        </StackPanel.LayoutTransform>
        <RadioButton x:Name="_ZeroRadio" Template="{StaticResource RectRadio}">
          <Grid>
            <StackPanel Orientation="Horizontal">
              <TextBlock VerticalAlignment="Center" Style="{StaticResource ProperyTextBlock}">10</TextBlock>
              <TextBlock VerticalAlignment="Center" FontSize="10" Margin="3 1 2 1">A</TextBlock>
            </StackPanel>
          </Grid>
        </RadioButton>
        <RadioButton x:Name="_OneRadio" Template="{StaticResource RectRadio}">
          <Grid>
            <StackPanel Orientation="Horizontal">
              <TextBlock VerticalAlignment="Center" Style="{StaticResource ProperyTextBlock}">12</TextBlock>
              <TextBlock VerticalAlignment="Center" FontSize="12" Margin="3 1 2 1">A</TextBlock>
            </StackPanel>
          </Grid>
        </RadioButton>
        <RadioButton x:Name="_TwoRadio" Template="{StaticResource RectRadio}">
          <Grid>
            <StackPanel Orientation="Horizontal">
              <TextBlock VerticalAlignment="Center" Style="{StaticResource ProperyTextBlock}">18</TextBlock>
              <TextBlock VerticalAlignment="Center" FontSize="18" Margin="3 1 2 1">A</TextBlock>
            </StackPanel>
          </Grid>
        </RadioButton>
        <RadioButton x:Name="_FiveRadio" Template="{StaticResource RectRadio}">
          <Grid>
            <StackPanel Orientation="Horizontal">
              <TextBlock VerticalAlignment="Center" Style="{StaticResource ProperyTextBlock}">24</TextBlock>

              <TextBlock VerticalAlignment="Center" FontSize="24" Margin="3 1 2 1">A</TextBlock>
            </StackPanel>
          </Grid>
        </RadioButton>
        <RadioButton x:Name="_OtherRadio" Template="{StaticResource RectRadio}">
          <TextBlock Style="{StaticResource ProperyTextBlock}">other: </TextBlock>
        </RadioButton>
        <TextBox IsEnabled="{Binding ElementName=_OtherRadio, Path=IsChecked}" 
                 Text="{Binding ElementName=_FontSizeSelector, Path=SelectedFontSize, Mode=TwoWay}" 
          Style="{StaticResource ProperyTextBox}" Width="60"/>
      </StackPanel>
    </Expander.Header>

    <StackPanel Orientation="Horizontal">
      <TextBlock>1 </TextBlock>
      <Slider x:Name="_BigSlider" Orientation="Horizontal" Width="200" Minimum="1" Maximum="200" SmallChange="1" LargeChange="1" 
              TickFrequency="1" TickPlacement="None" IsSnapToTickEnabled="True" 
        Value="{Binding ElementName=_FontSizeSelector, Path=SelectedFontSize, Mode=TwoWay}"/>
      <TextBlock> 200 </TextBlock>
    </StackPanel>

  </Expander>
</UserControl>
